﻿@{
    ViewBag.Title = "Home Page";
}
@section featured {
    <section class="featured">
        <div class="content-wrapper" style="font-size: 140%">
@*            <hgroup class="title">
                <h1>@ViewBag.Title.</h1>
                <h2>@ViewBag.Message</h2>
            </hgroup>*@
            <p>
                BuildJavaScriptDataModels is a small .Net library that will automatically generate
                a JavaScript Data Model that represents a .Net class. It works by scanning the public
                properties on the class and then outputs a JavaScript function that returns a copy
                of the new JavaScript Data Model for client side use.
            </p>
        </div>
    </section>
}
<section class="features">
    <section class="feature">
        <h3>Purpose</h3>
    <p>The inspiration for this project was using <a href='http://knockoutjs.com/' target="_blank">KnockoutJs
    </a> to implement an <a href='http://en.wikipedia.org/wiki/Model_View_ViewModel'  target="_blank">MVVM</a> pattern in
    the browser client.  One requirement to use KnockoutJs efficiently is to have data models available on the client.   </p>
    <p>
    We found writing data models by hand in JavaScript to model our c# classes to be very tedious and prone to errors.  This project
    is the result of trying to find a more efficient way to automatically generate the data models.
    </p>
    <h3>Usage</h3>
    <pre class='brush: csharp; class-name:featureHeight1; toolbar:false'>
using BuildJavascriptDataModel;
string s = BuildJavascriptDataModel.Build(
               typeof(NestModelNestedClass),
               "nestedModel" );
    </pre>
    <span class='codeFont '>BuildJavascriptDataModel.Build</span> is a static function that 
    accepts the type of the class to build the JavaScript data model.  It returns a string containing
    the full text of the data model.
 <h5>Parameters</h5>
    <div class="hang"><b>1st</b> - This required parameter is the type of the class to generate the data model from</div>
    <div class="hang"><b>2nd</b> - This optional parameter is the name of the JavaScript function that returns
    the data model.  If this parameter is not supplied, then the name of the class is used instead</div>

    <h3>For Asp.Net MVC Users</h3>
    There is also a set of HTML helpers for use in views.  

    <pre class='brush: csharp;  class-name:featureHeight2; toolbar:false'>
&lt;script type=&quot;text/javascript&quot;&gt;
  $(document).ready(function () {
     &#64;Html.BuildJsPrototype(typeof (NestedModel),
        &quot;nestedModel&quot;)
     viewModel = {};
     var b = nestedModel();
     viewModel.model = ko.observable(b);
     });
&lt;/script&gt;  
    </pre>
     All parameters are optional.  If a type is not supplied, then the type of the Model in the strongly typed View is used.<br />
     Please notice that we are using an HTML helper method inside of a &lt;script&gt; tag.
    </section>

    <section class="feature">
        <h3>
            Convert this c# class -
        </h3>
        <pre class='brush: csharp; class-name: featureHeight3; toolbar:false'>
public class NestModelNestedClass
{
    public bool CheckBoxTest { get; set; }
    public int IntegerTest { get; set; }
}
public class NestedModel
{
    public NestModelNestedClass 
              NestModelSet { get; set; }
    public int IntProperty { get; set; }
    public string SimpleProperty { get; set; }
}
        </pre>
        <h3>
            Automatically to this JavaScript</h3>
        <pre class='brush: js; class-name: featureHeight; toolbar:false'>
//------------------------------------------------
//      Begin Auto Generated code ----------------
//      For Model Type - NestedMtodel   ----------
//------------------------------------------------
var nestedModel = function(){ 
     return {
        NestModelSet: { 
            CheckBoxTest: {},
            IntegerTest:  {}
            },
        IntProperty:  {},
        SimpleProperty:  {}
        }
    }
//------------------------------------------------
//      End Auto Generated code ------------------
//------------------------------------------------
</pre>
    </section>
</section>
